<template>
  <div class="JADP-common-layout">
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="班级名称">
              <el-input
                v-model="classname"
                placeholder="请输入"
                readonly
                @click.native.stop="$refs.clazzTable.visible = true"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="$refs.clazzTable.visible = true"
                  >查询</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学员名称">
              <el-select
                v-model="form.stuname"
                placeholder="请先选择班级在选择学员"
                clearable
              >
                <el-option
                  v-for="(item, index) in studentList"
                  :key="index"
                  :value="item.stuid"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="JADP-common-layout-main JADP-flex-main">
        <div class="JADP-common-page-header">
          <h3>培训班：{{ classInf.classname }}</h3>
          <div class="timer">
            培训时间：{{ (classInf.traindate_start * 1) | dateFormat }} ~
            {{ (classInf.traindate_end * 1) | dateFormat }}
          </div>
          <div class="xue-shi">
            <div>总学时：{{ classInf.hours }}</div>
          </div>
        </div>
        <el-row
          class="main_"
          :gutter="30"
          :style="{ margin: '0 auto', width: '100%' }"
        >
          <el-col :span="16" style="height:360px">
            <p>学员信息</p>
            <JADP-table
              :data="list"
              ref="table1"
              class="tb1"
              highlight-current-row
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              @row-click="rowClick"
            >
              <el-table-column label="姓名" prop="name"></el-table-column>
              <el-table-column label="身份证" prop="idcard"></el-table-column>
              <el-table-column label="单位" prop="company"></el-table-column>
              <el-table-column label="总学时" prop="hours"></el-table-column>
              <el-table-column label="学习进度" prop="studyprogress">
                <template #default="{ row }">
                  <el-progress
                    :width="25"
                    :height="25"
                    :percentage="
                      Number(row.studyprogress) ? row.studyprogress / 1 : 0
                    "
                  ></el-progress>
                </template>
              </el-table-column>
            </JADP-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData(id)"
            />
          </el-col>
          <el-col :span="8" class="jin-du">
            <div class="jd-circle">
              <el-progress
                :stroke-width="10"
                :width="205"
                :height="205"
                type="circle"
                :percentage="
                  Number(classInf.averageprogress)
                    ? classInf.averageprogress / 1
                    : 0
                "
                style="margin-bottom: 30px"
              ></el-progress>
              <h3>班级平均进度</h3>
            </div>
          </el-col>
        </el-row>
        <el-row class="zb">
          <el-tabs
            v-model="activeName"
            style="padding: 0 20px"
            @tab-click="tabClick"
          >
            <el-tab-pane name="1" label="课程分析">
              <div class="tb">
                <JADP-table
                  :data="list1"
                  ref="tablea"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="课程名称"
                    prop="crmclassification"
                  ></el-table-column>
                  <el-table-column
                    label="课程总学时"
                    prop="hours"
                  ></el-table-column>
                  <el-table-column label="已完成学时" prop="stuhours">
                    <template #default="{ row }">
                      <div>{{ row.stuhours || 0 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="最近学习" prop="recentTime">
                    <template #default="{ row }">
                      {{ row.recentTime || "未学习" }}
                    </template>
                  </el-table-column>
                  <el-table-column label="课程进度" prop="courseSchedule">
                    <template #default="{ row }">
                      <el-progress
                        :width="25"
                        :height="25"
                        :percentage="
                          Number(row.courseSchedule)
                            ? row.courseSchedule / 1
                            : 0
                        "
                      ></el-progress>
                    </template>
                  </el-table-column>
                </JADP-table>
              </div>
              <pagination
                :total="total1"
                :page.sync="listQuery1.currentPage"
                :limit.sync="listQuery1.pageSize"
                @pagination="initData1(id)"
              />
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </div>
    <ClazzTable ref="clazzTable" @currentRow="currentRow" />
  </div>
</template>
<script>
import {
  reteOfLearing,
  studentAnalysis,
  practiceAnalysis,
  classInfo
} from "@/api/class";
import ClazzTable from "../components/clazzTable.vue";
import request from "@/utils/request";
export default {
  name: "LearningStatistics",
  components: {
    ClazzTable
  },
  data() {
    return {
      name: "aaa",
      exportBoxVisible: false,
      dataForm1: {
        id: ""
      },
      classInf: {},
      total: 0,
      total1: 0,
      total2: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      listQuery1: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      query: {
        clazzid: "",
        name: ""
      },
      form: {
        classname: "",
        stuname: ""
      },
      query1: {
        clazzid: "",
        stuid: ""
      },
      query2: {
        clazzid: "",
        stuid: ""
      },
      list: [],
      backupsList: [],
      list1: [],
      list2: [],
      activeName: "1",
      id: "",
      classname: "",
      studentList: []
    };
  },
  watch: {
    classname(newvalue) {
      if (newvalue) {
        this.initData(this.form.classname);
        this.classInfo(this.form.classname);
        this.getstudentList();
      }
    }
  },
  methods: {
    rowClick(row) {
      this.rest();
      this.query1.stuid = row.stuid;
      this.initData1(this.id);
    },

    rest() {
      this.listQuery1 = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      };
    },
    tabClick({ name }) {
      this.rest();
      let ref = name == "1" ? "tablea" : "tableb";
      this.$nextTick(() => {
        this.$refs[ref].$refs.JADPTable.doLayout();
      });
      this.activeName == "1" && this.initData1(this.id);
      this.activeName == "2" && this.initData2(this.id);
    },
    async classInfo(id) {
      const { data } = await classInfo(id,this.$store.getters.organizeId);
      this.classInf = data;
    },
    async initData(id) {
      this.id = id;
      let query = this.checkQuery(id, this.form, this.listQuery);
      try {
        const { data } = await studentAnalysis(query);
        this.list = data.list;
        this.backupsList = data.list;
        if (this.list.length) {
          this.$refs.table1.$refs.JADPTable.setCurrentRow(this.list[0]);
          this.query1.stuid = this.list[0].stuid;
          this.query2.stuid = this.list[0].stuid;
          this.initData1(id);
        }
        this.total = data.pagination.total;
      } catch {}
    },
    async initData1(id) {
      let query = this.checkQuery(id, this.query1, this.listQuery1);
      const { data } = await reteOfLearing(query);
      this.list1 = data.list;
      this.total1 = data.pagination.total;
    },

    checkQuery(id, query, listQuery) {
      this.id = id;
      query.clazzid = this.id;
      let _query = {
        ...listQuery,
        ...query,
        organizeId:this.$store.getters.organizeId
      };
      let query1 = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query1[key] = _query[key].join();
        } else {
          query1[key] = _query[key];
        }
      }
      return query1;
    },
    search() {
      this.list = this.backupsList.filter(
        item => item.stuid === this.form.stuname
      );
      this.query1.stuid = this.list[0].stuid;
      this.initData1(this.id);
    },
    reset() {
      for (let key in this.form) {
        this.form[key] = undefined;
      }
      this.classname = "";
      this.list = [];
      this.list1 = [];
      this.classInf = {};
    },
    currentRow(val) {
      this.form.classname = val.id;
      this.classname = val.classname;
    },
    //获取班级下的所以学员列表
    getstudentList() {
      request({
        url: "/api/studentanalysis/Xy_ks_studentanalysis/getAll",
        method: "get",
        data: {
          clazzid: this.form.classname,
          organizeId:this.$store.getters.organizeId
        }
      }).then(res => {
        this.studentList = res.data;
      });
    }
  }
};
</script>
<style scoped lang="scss">
h3 {
  font-weight: normal;
}

.timer {
  position: absolute;
  left: 575px;
}
.xue-shi {
  position: absolute;
  left: 1275px;
}

.main_ {
  padding: 10px 20px;
  p {
    line-height: 30px;
  }
}
.zb {
  height: 350px;
  .tb {
    height: 220px;
    overflow: auto;
  }
}
.tb1 {
  //   height: 240px;
  height: 85% !important;
}
.jin-du {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}
.tb ::v-deep .el-table__body-wrapper {
  height: calc(100% - 40px) !important;
}

.tb1 ::v-deep .el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  width: 50px;
  left: 22px;
  margin-top: 1px;
}
.jd-circle {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
// ::v-deep .el-table {
//   width: 100%;
//   display: flex;
//   flex-direction: column;
//   .el-table__body-wrapper {
//     flex: 1;
//   }
// }
</style>
